<template>
    <div class="form-content">
        
        <el-form ref="form" :model="form" :rules="rules" label-width="100px" :disabled="type == 'detail' ? true : false">
            <el-row :gutter="20">
                
                <el-col :span="24">
                    <el-form-item  label="音乐名称" prop="name">
                        <el-input  v-model="form.name" placeholder="请输入音乐名称"  />
                    </el-form-item>
                </el-col>
                
                
                <el-col :span="24">
                    <el-form-item label="标签" prop="tags">
                        <el-select
                            v-model="form.tags"
                            placeholder="请选择标签"
                            clearable
                        >
                            <el-option 
                                v-for="dict in dict.type.background_music_type" 
                                :label="dict.label" 
                                :key="dict.value" 
                                :value="dict.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                
                <el-col :span="24">
                    <el-form-item  label="音乐文件" prop="materiaFileUrl">
                        <fileUpload v-model="form.materiaFileUrl" :limit="1" :isJson="false" accept=".mp3,.wav,.wma,.ape,.flac,.ogg,.aac" :fileSize="15"/>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if=" form.materiaFileUrl">
                    <el-form-item  label="试听" >
                        <audio ref="audio" :src="form.materiaFileUrl"  controls style="height: 30px;width:150px" ></audio>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" v-if="type != 'detail'" >
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </div>
</template>
<script>
import {addMaterial,detailMaterial,editMaterial} from '@/api/materialManage/index.js'
export default{
    dicts: ['background_music_type'],
    props: {
        id: {
            type:[Number,String],
            default: ''
        },
        type: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            
            form: {
                materiaType: 2
            },
            rules: {
                name: [
                    { required: true, message: "音乐名称不能为空", trigger: "blur" }
                ],
                
                tags: [
                    { required: true, message: "标签不能为空", trigger: "blur" }
                ],
                materiaFileUrl: [
                    { required: true, message: "音乐文件不能为空", trigger: "blur" }
                ],
                
               
            },
        }
    },
    created() {
        if(this.id) {
            this.getDetail()
        }
    },
    methods: {
        getDetail() {
            detailMaterial({materialId: this.id}).then(res => {
                this.form = res.data
                this.form.tags = Number(this.form.tags)
            })
        },
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if(this.id) {
                        editMaterial(this.form).then(res => {
                            this.$modal.msgSuccess(res.msg)
                            this.$emit('success','')
                        })
                    }else{
                        addMaterial(this.form).then(res => {
                            this.$modal.msgSuccess(res.msg)
                            this.$emit('success','')
                        })
                    }
                    
                }
            })
        },
        cancel() {
            this.$emit('close','')
        }
    }
}
</script>
